<!-- 左侧菜单 -->
<template>
  <a-menu
    class="menu"
    :selected-keys="[currentRoute]"
    :auto-open-selected="true"
  >
    <template v-for="item in accessStore.accessMenus" :key="item.name">
      <MenuItem @select-menu="selectMenu" :item="item"></MenuItem>
    </template>
  </a-menu>
</template>

<script setup>
import { toRaw, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import MenuItem from "./Item.vue";
// import { usePermissionStore } from "@/stores/modules/permission.js";
import { isRouteIncluded } from "@/router/utils/route-match.js";
import { useAccessStore } from "@/stores/modules/access";

const route = useRoute();
const router = useRouter();
// const permissionStore = usePermissionStore();
const accessStore = useAccessStore();

// 生成菜单列表
const menuKeyList = computed(() => {
  // const finalRoutesMap = Object.fromEntries(
  //   router.getRoutes().map(({ name, path }) => [name, path])
  // );
  // const frontList = toRaw(permissionStore.frontMenuList);
  // const frontList = toRaw(accessStore.accessMenus);
  const result = [];
  // frontList.forEach((menu) => {
  //   const children = menu.children || [];
  //   if (children.length) {
  //     children.forEach((e) => result.push(e.path));
  //   } else {
  //     result.push(menu.path);
  //   }
  // });
  // console.log(result);

  return router.getRoutes().map((e) => e.path);
});

const currentRoute = computed(() => {
  const nowPath = route.path;
  // const splitPath = nowPath.split("/").filter((e) => e);

  // 根据当前路由 直接测试 所有菜单列表 是否包含
  const nowCurrent = menuKeyList.value.find((e) => isRouteIncluded(e, nowPath));
  return nowCurrent;
});

function selectMenu(item, a) {
  // console.log("select menu", item.path);
  // router.push({ path: item.fullPath });

  router.push({ path: item.path });
}
</script>

<style lang="less">
.arco-menu-item {
  transition: color 0.25s, background-color 0.25s;
}
</style>
